import React, { useState } from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import { TabBar } from 'antd-mobile';
import {
    HomeOutlined,
    ProfileOutlined,
    MessageOutlined,
    RedEnvelopeOutlined,
    UserOutlined
} from '@ant-design/icons';
import './All.css'


export default function All() {

    const navigate = useNavigate()

    const tabs = [
        {
            key: '/all/home',
            title: '首页',
            icon: <HomeOutlined  />
        },
        {
            key: '/all/reserve',
            title: '预定',
            icon: <ProfileOutlined />,
        },
        {
            key: '/all/message',
            title: '消息',
            icon: <MessageOutlined />,
        },
        {
            key: '/all/money',
            title: '钱包',
            icon: <RedEnvelopeOutlined />,
        },
        {
            key: '/all/my',
            title: '我的',
            icon: <UserOutlined />,
        },
    ];

    const [ikey, setIkey] = useState("/all/home")
    const handleRouter = (key) => {
        navigate(key)
        setIkey(key)
    }

    return (
        <div>
            {/* activeKey={'/all/home'}  */}
            <Outlet />
            <TabBar className='tabbar' onChange={(key) => { handleRouter(key) }}>
                {tabs.map(item => (<TabBar.Item className={ikey === item.key ? 'tabbar-item' : ''} key={item.key} icon={item.icon} title={item.title} />))}
            </TabBar>
        </div>
    )
}
